var MaterialCheckTypeForm = function () {
  var template = /*html*/ `
    <div class="material-check-type-form" v-loading.fullscreen.lock="loading">
      <template v-if="materialCheck!==null">
      <div style="margin-bottom:20px">
        <span style="margin-right:16px">物料名称</span>
        <span>{{materialCheck.materialName}}</span>
      </div>
      <div class="check-type-form-setting">
        <div style="margin-bottom:15px">
          <span style="margin-right:20px">物料检验类型设置</span>
          <el-button type="primary" size="small" @click="settingType">设置检验类型</el-button>
        </div>
        <div v-for="(material,index) in materialCheck.materialCheckTypeList" :key="'material'+index" class="material-check-type-form-item">
          <div style="margin-bottom:5px">设置{{index+1}}:</div>
          <el-form label-width="auto" size="medium">
            <el-form-item label="检验类型">
              <el-select filterable v-model="material.checkTypeId" class="form-input">
                <el-option v-for="(item,index) in checkTypeList" :key="'index'+index" :value="item.id" :label="item.type">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容描述">
              <el-input class="form-input" v-model="material.checkDesc"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="primary" size="small" @click="addMaterial">添加</el-button>
        </div>
      </div>

      <div style="margin-top:10px;text-align:center">
        <el-button type="primary" size="small" @click="saveCheckType">保存设置</el-button>
      </div>
      </template>

      <el-dialog append-to-body title="设置检验类型" :visible.sync="openForm" width="600px" top="5vh" :close-on-click-modal="false">
        <div style="height:calc(90vh - 54px);overflow:auto">
          <check-type-form v-if="openForm" :check-type-list="checkTypeList"></check-type-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      material: {
        type: Object,
        required: true
      },
      dropdownOption: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        checkTypeList: [],
        materialCheck: null,
        openForm: false
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setMaterialCheckData(),
        this.setCheckTypeList()
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setMaterialCheckData: function () {
        var material = this.material;
        var materialName = material.materialName;
        this.loading = true;
        var self = this;
        ajaxRequest('materialCheckType/getMaterialCheckType', {
          materialName: materialName
        }).then(function (materialCheckTypeList) {
          var materialCheck = new MaterialCheckTypeModel(materialName, materialCheckTypeList)
          self.materialCheck = materialCheck;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      setCheckTypeList: function () {
        var dropdownOption = this.checkTypeList;
        var checkTypeList = dropdownOption.checkTypeList;
        if (checkTypeList !== undefined) {
          this.checkTypeList = checkTypeList;
          return Promise.resolve(checkTypeList);
        }

        var self = this;
        ajaxRequest('materialCheckType/getCheckType').then(function (checkTypeList) {
          checkTypeList = _.map(checkTypeList, function (checkType) {
            return {
              id: checkType.id,
              type: checkType.checkType
            };
          });
          self.checkTypeList = checkTypeList;
          dropdownOption.checkTypeList = checkTypeList;
          return checkTypeList;
        });
      },

      settingType: function () {
        this.openForm = true;
      },

      addMaterial: function () {
        this.materialCheck.addMaterial();
      },

      saveCheckType: function () {
        var materialCheck = this.materialCheck;
        var code = materialCheck.checkValid();
        if (code !== '') {
          var msg = '';
          if (typeof code === 'string') {
            msg = i18n.getMsg(`iqc.materialCheckType.error.${code}`);
          } else {
            var index = code[1];
            msg = i18n.getMsg(`iqc.materialCheckType.error.${code[0]}`);
            msg = `设置${index+1}里的${msg}`;
          }
          this.$alert(msg);
          return;
        }

        var postData = materialCheck.getObject();
        this.loading = true;
        var self = this;
        return ajaxRequest('materialCheckType/setMaterialCheckType', postData).then(function () {
          self.loading = false;
          self.$emit('save-success');
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      CheckTypeForm: CheckTypeForm
    },

    template: template
  };
}();
